<script setup>
defineProps({
    number: Number
})
</script>

<template>
    <div class="unread-prompt-container">
        <div class="number">{{ number }}</div>
    </div>
</template>

<style scoped lang="scss">
@import '@renderer/assets/scss/mixins';

$container-size: 17px;
$number-font-size: 10px;
$number-font-weight: 600;

.unread-prompt-container {
    @include set-size($container-size, $container-size);
    background-color: red;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    .number {
        color: white;
        font-size: $number-font-size;
        font-weight: $number-font-weight;
    }
}
</style>
